<?php 
    $lang = "th";
?>
<div>
    <h1 class="head">News Info</h1>
    <a href="index.php?r=NewsManage/Newsfunc&mode=add" class="btn btn-primary pull-right">Add News</a>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover tablestaff">
    <thead>
        <tr>
            <th>#</th>
            <th>ID</th>
            <th>Title</th>
            <th>Create</th>
            <th>Edit</th>
            <th>Delete</th>
            <th>Status</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php $n = 1;
        foreach ($newslist as $news) { ?>
            <tr>
                <td><?=$n?></td>
                <td><?=$news['NewsID']?></td>
                <td><?= $lang=="en" ? GM::SubstringTH($news['TitleEN'], 0, 200) : GM::SubstringTH($news['TitleTH'], 0, 200) ?></td>
                <td><?= $lang=="en" ? GM::setformDateEN($news['CreateDate']) : GM::setformDateTH($news['CreateDate']) ?></td>
                <td><?= $lang=="en" ? GM::setformDateEN($news['EditDate']) : GM::setformDateTH($news['EditDate']) ?></td>
                <td><?= isset($news['DeleteDate']) ? $lang=="en" ? GM::setformDateEN($news['DeleteDate']) : GM::setformDateTH($news['DeleteDate']) : "-" ?></td>
                <td class="col_Status"><img src="images/<?= $news['Status']=='P' ? 'accept.png' : 'disable.png';?>" data_status="<?=$news['Status'];?>" data_id="<?=$news['NewsID']?>" style="cursor:pointer"></td>
                <td class="col_Detail"><a href="#myModal" role="button" data-toggle="modal"><image src="images/page_white_magnify.png" title="Detail" alt="Detail" data_id="<?=$news['NewsID']?>"></a></td>
                <td><a href="index.php?r=NewsManage/Newsfunc&mode=Edit&NewsID=<?=$news['NewsID']; ?>"><img src="images/page_white_edit.png" title="Edit" alt="Edit"></a></td>
                <form action="index.php?r=NewsManage/DeleteNews" method="POST" onsubmit="return confirmDelete()">
                        <input id="NewsID" name="NewsID" type="hidden" value="<?=$news['NewsID']?>" />
                        <td><input type="image" src="images/delete.png" title="Delete" /></td>
                </form>
            </tr>
            <?php $n++; ?>
       <?php } ?>
    </tbody>
</table>
</div>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <ul class="nav nav-tabs" id="tabZone">
                <li class="active"><a href="#EN" data-toggle="tab" title="News detail in english">EN</a></li>
                <li><a href="#TH" data-toggle="tab" title="News detail in thai">TH</a></li>
            </ul>
            <div class="tab-content">
                <div class ="tab-pane  active" id="EN">
                    <div class="modal-header" id="newsEN"></div>
                    <div class="modal-article" id="infoEN"></div>
                </div>
                <div class ="tab-pane" id="TH">
                    <div class="modal-header" id="newsTH"></div>
                    <div class="modal-article" id="infoTH"></div>
                </div>
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
    $(function() {
        $('.table tbody').on('click','td.col_Status img',function() {
            changeStatus($(this));
        });
        $('.table tbody').on('click','td.col_Detail img',function() {
            showDetail($(this));
        });
        $(".modal modal-wide").on("show.bs.modal", function() {
          var height = $(window).height() - 400;
          $(this).find(".modal-body").css("max-height", height);
        });
    });
    
    function showDetail($obj) {   
        var newsid = $obj.attr('data_id');
        var row = $obj.parent().parent().parent();
        var statusRow = row.find('td.col_Status img').attr('data_status');
        var statusEN = statusRow == "P" ? "Public" : "Unpublic";
        var statusTH = statusRow == "P" ? "เผยเเพร่" : "ไม่เผยเเพร่";
        $.post('index.php?r=NewsManage/GetNews', {newsID: newsid}, 
                function(data) {
                        var json = JSON.parse(data);
                        console.log(json);
                        $('#newsEN').html(json.TitleEN);
                        $('#newsTH').html(json.TitleTH);
                        $('#infoEN').html(json.InfoEN);
                        $('#infoTH').html(json.InfoTH);
                },'text');
    }
    
    function changeStatus($obj){
        var status = $obj.attr('data_status');
        var id = $obj.attr('data_id');
        $.post('index.php?r=NewsManage/ChangeStatus', {
            newsID: id,
            status: (status == 'P')?'U':'P'
            }, function(data){
                if(data>0){
                    if(status == 'P'){
                        $obj.attr('src', 'images/disable.png');
                        $obj.attr('data_status', 'U');
                    } else {
                        $obj.attr('src', 'images/accept.png');
                        $obj.attr('data_status', 'P');
                    }
                }
            }, 'text');
    }
    
    function confirmDelete() {
        return confirm("ยืนยันการลบ")?TRUE:FALSE;
    }
</script>
<link href="css/custom.css" rel="stylesheet">
<style>
    #myModal{
        width: 70%;
    }
    .modal .modal-body {
      overflow-y: auto;
    }

    .modal {
        left:37%;
    }
    .modal-header {
        text-align: left;
        font-weight:bold;
    }
    .modal modal-wide .modal-body p { margin-bottom: 900px }
</style>